<template>
  <div class="edit">
    <!-- icon颜色选择器下滑进入 -->
    <transition v-if="showIconColor" name="van-slide-down">
      <div v-show="showIconColorPan" class="colorPicker">
        <color-picker
            v-model:pureColor="useCollectEditStore().content.iconColor"
            :isWidget="true"
            useType="pure"
            :roundHistory="true"
        />
      </div>
    </transition>
    <!-- tagGb颜色选择器左滑进入 -->
    <transition v-if="showTagColor" name="van-slide-left">
      <div v-show="showTagColorPan" class="colorPicker">
        <color-picker
            v-model:pureColor="useCollectEditStore().content.tagBgColor"
            :isWidget="true"
            useType="pure"
            :roundHistory="true"
        />
      </div>
    </transition>
    <div class="edit-title">
      <span v-text="editTitle"></span>
      <van-button type="primary" size="mini" @click="handleSubmit">完成</van-button>
    </div>
    <div class="edit-content">
      <!-- icon -->
      <div class="edit-content-iconAndTitle">
        <div v-if="showIconSelect" class="edit-content-icon" @click="handShowIconSelect">
          <i :class="useCollectEditStore().content.icon"></i>
        </div>
        <div v-if="showIconColor" class="edit-content-icon" @click="handShowColorPan('icon')">
          <svg t="1677335045621" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
               p-id="9260" width="20" height="20">
            <path
                d="M517.2992 985.6a474.2912 474.2912 0 0 1-353.2544-158.1568c-91.0592-101.8624-132.6848-233.472-117.2224-370.5856 23.9872-212.5568 195.1488-386.8416 407.0144-414.3104a495.36 495.36 0 0 1 63.488-4.1472 472.9856 472.9856 0 0 1 449.3824 323.7376c8.7552 26.1632 26.1376 91.8784-0.7936 136.064-13.952 22.8864-38.6816 37.1968-73.4464 42.5984-13.1584 2.0224-37.2992 5.0944-65.3824 8.448a173.696 173.696 0 0 0-119.6288 70.3232 173.1584 173.1584 0 0 0-29.5168 135.2704l5.504 27.5712a169.216 169.216 0 0 1-35.0464 140.8256 169.3952 169.3952 0 0 1-131.0976 62.3616zM486.4 704c-49.408 0-89.6 40.192-89.6 89.6s40.192 89.6 89.6 89.6 89.6-40.192 89.6-89.6-40.192-89.6-89.6-89.6z"
                fill="#F5C276" p-id="9261"></path>
            <path
                d="M517.3248 51.2a460.2368 460.2368 0 0 1 437.248 314.9824c6.3744 19.1232 25.216 84.6336 0.384 125.3888-12.0576 19.7888-33.152 31.744-64.4864 36.608-11.6736 1.8176-33.5104 4.6336-64.9216 8.3968a186.5728 186.5728 0 0 0-128.4864 75.4944 186.1376 186.1376 0 0 0-31.7184 145.3312l5.504 27.5712a156.5184 156.5184 0 0 1-32.4352 130.2272 156.4416 156.4416 0 0 1-121.1392 57.6256A461.568 461.568 0 0 1 173.5424 818.944c-88.576-99.1232-129.1008-227.2-114.048-360.6016 23.3728-206.848 189.8752-376.3712 395.9808-403.1232A483.3792 483.3792 0 0 1 517.3248 51.2M486.4 896c56.4736 0 102.4-45.9264 102.4-102.4s-45.9264-102.4-102.4-102.4-102.4 45.9264-102.4 102.4 45.9264 102.4 102.4 102.4m30.9248-870.4c-21.4272 0-43.1616 1.3824-65.152 4.2496C233.728 58.1888 58.8032 236.544 34.0992 455.4496 0.9728 749.3888 230.0672 998.4 517.3248 998.4c115.072-0.2816 201.2416-105.6256 178.6624-218.4704l-5.504-27.5712c-18.3296-91.5968 45.3888-179.2768 138.1376-190.3872a2354.2784 2354.2784 0 0 0 65.792-8.4992c128.3584-19.8912 100.608-147.0208 84.48-195.3792C914.4576 164.8896 732.1344 25.6 517.3248 25.6zM486.4 870.4a76.8 76.8 0 1 1 0-153.6 76.8 76.8 0 0 1 0 153.6z"
                fill="#C29653" p-id="9262"></path>
            <path d="M243.2 550.4a76.8 76.8 0 1 0 0 153.6 76.8 76.8 0 1 0 0-153.6z" fill="#F78F8F" p-id="9263"></path>
            <path
                d="M243.2 563.2c35.3024 0 64 28.6976 64 64S278.5024 691.2 243.2 691.2 179.2 662.4768 179.2 627.2 207.8976 563.2 243.2 563.2m0-25.6a89.6 89.6 0 1 0 0 179.2 89.6 89.6 0 0 0 0-179.2z"
                fill="#C74343" p-id="9264"></path>
            <path d="M243.2 294.4a76.8 76.8 0 1 0 0 153.6 76.8 76.8 0 1 0 0-153.6z" fill="#FFEEA3" p-id="9265"></path>
            <path
                d="M243.2 307.2c35.3024 0 64 28.6976 64 64S278.5024 435.2 243.2 435.2 179.2 406.5024 179.2 371.2 207.8976 307.2 243.2 307.2m0-25.6a89.6 89.6 0 1 0 0 179.2 89.6 89.6 0 0 0 0-179.2z"
                fill="#BA9B48" p-id="9266"></path>
            <path d="M448 140.8a76.8 76.8 0 1 0 0 153.6 76.8 76.8 0 1 0 0-153.6z" fill="#BAE0BD" p-id="9267"></path>
            <path
                d="M448 153.6C483.3024 153.6 512 182.2976 512 217.6S483.3024 281.6 448 281.6 384 252.9024 384 217.6 412.6976 153.6 448 153.6m0-25.6a89.6 89.6 0 1 0 0 179.2 89.6 89.6 0 0 0 0-179.2z"
                fill="#5E9C76" p-id="9268"></path>
            <path d="M704 192a76.8 76.8 0 1 0 0 153.6 76.8 76.8 0 1 0 0-153.6z" fill="#8BB7F0" p-id="9269"></path>
            <path
                d="M704 204.8c35.3024 0 64 28.6976 64 64S739.3024 332.8 704 332.8 640 304.1024 640 268.8 668.6976 204.8 704 204.8m0-25.6a89.6 89.6 0 1 0 0 179.2 89.6 89.6 0 0 0 0-179.2z"
                fill="#4E7AB5" p-id="9270"></path>
          </svg>
        </div>
        <!-- 通过 validator 进行函数校验 -->
        <van-field
            v-model="useCollectEditStore().content.name"
            name="validator"
            clearable
            :placeholder="nameTips"
            @update:model-value="handNameChange"
            :rules="[{ validator, message: '请输入正确内容' }]"/>
      </div>
      <!-- tag -->
      <div v-if="showTag" class="edit-content-tag">
        <van-tag v-if="showTagModel" v-text="useCollectEditStore().content.tagName == ''?'标签':useCollectEditStore().content.tagName" :color="useCollectEditStore().content.tagBgColor" :text-color="useCollectEditStore().content.tagColor"></van-tag>
        <svg v-if="showTagBgColor" @click="handShowColorPan('tag')" t="1679235113290" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5032" width="40" height="40"><path d="M896 384c-46.72-46.72-160.64-25.6-219.52-10.24L448.64 152.96l-21.76 21.76L313.6 65.28 223.36 152.96 336.64 262.4 66.56 524.16v2.56L448.64 896l359.68-349.44L960 693.12S960 448 896 384zM194.56 524.16l255.36-247.68 254.72 247.68H194.56z" fill="#8a8a8a" p-id="5033"></path></svg>
        <!-- 通过 validator 进行函数校验 -->
        <van-field
            v-if="showTagNameField"
            v-model="useCollectEditStore().content.tagName"
            name="validator"
            :maxlength="titleMaxLength"
            clearable
            @update:model-value="handTagNameChange"
            :placeholder="tagTips"/>
      </div>
    </div>
  </div>
</template>

<script setup>
// 作者：YCH
// 时间：2022年10月30日 16:20:46
import {computed, defineComponent, getCurrentInstance, reactive, ref, toRaw, watch} from 'vue';
import useCollectEditStore from "@/stores/modules/collectEdit.js";
import useOperatorBoxStore from "@/stores/modules/operatorBox.js";
import strinigUtils from "@/utils/stringUtils.js";
import {addCollect, updateCollect} from "@/api/app/app.js";
import {ColorPicker} from "vue3-colorpicker";

const { proxy } = getCurrentInstance();

// 当前颜色选择器 icon tag
const currentColorPicker = ref("");

const props = defineProps({
  // 标题
  editTitle: {
    type: String,
    default: '创建收藏夹'
  },
  // 收藏列表名称提示
  nameTips: {
    type: String,
    default: "请输入收藏夹标题"
  },
  // 收藏列表tag提示
  tagTips: {
    type: String,
    default: "请输入收藏夹标签名称"
  },
  // 是否显示icon颜色选择器
  showIconColor: {
    type: Boolean,
    default: true
  },
  // 是否显示tag颜色选择器
  showTagColor: {
    type: Boolean,
    default: true
  },
  // 是否显示icon选择器
  showIconSelect: {
    type: Boolean,
    default: true
  },
  // 是否显示tag内容
  showTag: {
    type: Boolean,
    default: true
  },
  // 是否显示tag同步用户输入内容
  showTagModel: {
    type: Boolean,
    default: true
  },
  // 是否显示tag背景颜色选择
  showTagBgColor: {
    type: Boolean,
    default: true
  },
  // 是否显示tag名称输入框
  showTagNameField: {
    type: Boolean,
    default: true
  },
});

const emit = defineEmits(['submit'])

// tag名称最大长度
const titleMaxLength = 5;

// 校验函数返回 true 表示校验通过，false 表示不通过
const validator = (val) => /^[\u4e00-\u9fa5\w]{1,30}$/.test(val);
// 显示修改图标
const handShowIconSelect = (value) => {
  useOperatorBoxStore().showOverlay(true, 'icon');
}

/** 是否显示icon颜色选择器 */
const showIconColorPan = ref(false)

/** 是否显示tag颜色选择器 */
const showTagColorPan = ref(false)

/** 显示修改颜色 */
const handShowColorPan = (value) => {
  currentColorPicker.value = value;
  if (currentColorPicker.value === 'icon'){
    // 如果tag标签的颜色选择器已经打开，先关闭
    if (showTagColorPan.value){
      showTagColorPan.value = !showTagColorPan.value;
    }
    showIconColorPan.value = !showIconColorPan.value
  }else if(currentColorPicker.value === 'tag'){
    // 如果icon标签的颜色选择器已经打开，先关闭
    if (showIconColorPan.value){
      showIconColorPan.value = !showIconColorPan.value;
    }
    showTagColorPan.value = !showTagColorPan.value
  }

}

/** 用户输入标题实时更新 */
const handNameChange = (val) =>{
  useCollectEditStore().setName(val)
}

/** 用户输入tag实时更新 */
const handTagNameChange = (val)=>{
  console.log(val)
  useCollectEditStore().setTagName(val)
}

/** 确定按钮 */
const handleSubmit = () => {
  emit('submit')
}

</script>

<style lang="less" scoped>
.edit {
  padding: 0 12px;

  .edit-title {
    display: flex;
    align-items: center;
    font-size: 14px;
    line-height: 34px;
    span{
      flex: 1;
      display: flex;
      justify-content: center;
    }
    :deep(.van-button){
      position: absolute;
      right: 12px;
    }
  }

  .edit-content {
    .edit-content-iconAndTitle,.edit-content-tag{
      display: flex;
      flex-direction: row;
      align-items: center;
      height: 36px;
      font-size: 16px;
      gap: 6px;
      margin-bottom: 10px;

      .edit-content-icon {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 30px;
        height: 30px;
        text-align: center;
        line-height: 30px;
        border-radius: 5px;
        background-color: var(--van-search-content-background-color);

        i {
          color: v-bind('useCollectEditStore().content.iconColor')
        }
      }
      .van-tag{
        display: flex;
        justify-content: center;
        min-width: 60px
      }
    }

    .van-cell {
      padding: 4px 6px !important;
      border-radius: 5px;
      background-color: var(--van-search-content-background-color)
    }


  }

  :deep(.vc-colorpicker) {
    border-radius: 10px;
  }

  .colorPicker {
    position: absolute;
    left: 10%;
    bottom: 120%;
  }
}
</style>
